<template>
    <div class="h-full flex flex-col">
        <el-form :inline="true" :model="searchform" style="width:100%">
            <div class="flex justify-between w-full">
                <el-form-item>
                    <el-button type="primary" :icon="Plus" @click="openDialog('add')">新增</el-button>
                    <el-button :icon="Refresh" @click="getList">刷新</el-button>
                </el-form-item>
                <el-space :size="1">
                    <el-form-item label="关键字筛选">
                        <el-input v-model="searchform.keyword" placeholder="请输入活动标题、地址、描述" clearable style="width:240px;"/>
                    </el-form-item>

                    <el-form-item label="是否公开">
                        <el-select v-model="searchform.public" placeholder="请选择活动状态" style="width:200px" clearable>
                            <el-option label="公开" :value="1"></el-option>
                            <el-option label="不公开" :value="0"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="getList" :icon="Search">查询</el-button>
                        <el-button @click="onRefresh" :icon="Refresh">重置</el-button>
                    </el-form-item>
                </el-space>
            </div>
        </el-form>
        <div class="table-section grid" style="height:calc(100% - 40px - 50px);margin-bottom:10px;">
            <el-table border :data="tableData.list" style="height:100%">
                <el-table-column prop="createUserInfo" label="活动创建人" width="150">
                    <template #default="scope">
                        <div class="flex">
                            <el-avatar shape="square" :size="40" :src="scope.row.createUserInfo.avatarUrl" style="flex-shrink:0"></el-avatar>
                            <span class="ml-2">{{ scope.row.createUserInfo.nickname }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="活动标题" align="center"/>
                <el-table-column prop="location" label="活动地点" align="center"/>
                <el-table-column prop="address" label="详细地址" align="center"/>
                <el-table-column label="活动日期" align="center" width="200px">
                    <template #default="scope">
                        {{ scope.row.startTime }} 至 {{ scope.row.endTime }}
                    </template>
                </el-table-column>
                <el-table-column prop="maxParticipants" label="允许报名人数" align="center"/>
                <el-table-column label="报名积分要求" align="center">
                    <template #default="scope">
                        <span v-if="!scope.row.minIntegral&& !scope.row.maxIntegral">无积分要求</span>
                        <span v-else>{{ scope.row.minIntegral }} 至 {{ scope.row.maxIntegral }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="报名UTR要求" align="center">
                    <template #default="scope">
                        <span v-if="!scope.row.minUtr&& !scope.row.maxUtr">无UTR要求</span>
                        <span v-else>{{ scope.row.minUtr }} 至 {{ scope.row.maxUtr }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="fee" label="报名费用" align="center"/>
                <el-table-column prop="phone" label="联系方式" align="center"/>
                <el-table-column prop="public" label="是否公开" align="center">
                    <template #default="scope">
                        {{ scope.row.public == 1 ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="创建时间" align="center"/>
                <el-table-column prop="action" label="操作" fixed="right" width="180px" align="center">
                    <template #default="scope">
                        <el-tooltip content="编辑" placement="top">
                            <el-button type="primary" :icon="Edit" circle plain @click="openDialog('update',scope.row)" size="small"/>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button type="danger" :icon="Delete" circle plain size="small" @click="deleteItem(scope.row) "/>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            :total="tableData.total"
            v-model:current-page="tableData.page"
            v-model:page-size="tableData.size"
            :page-sizes="[10, 50, 100, 200]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        />
        <dialog-add-edit ref="dialogRef" @update="getList"></dialog-add-edit>
    </div>

</template>
<script setup>
import { ref, reactive, nextTick, useTemplateRef, onMounted } from 'vue'
import { Delete, Refresh, Edit, Search, Share, Plus } from '@element-plus/icons-vue'
import ballactiveApi from 'api/model/ballactive.js'
import DialogAddEdit from './dialog-add-edit.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

/**
 * 搜索相关字段
 */
const searchform = reactive({
    keyword: '',
    public: '',
})

/**
 * 表格相关字段
 */
const tableData = reactive({
    list: [],
    total: 0,
    page: 1,
    size: 10
})

/**
 *  获取列表
 */
async function getList () {
    const { code, data } = await ballactiveApi.list.get({
        page: tableData.page,
        size: tableData.size,
        keyword: searchform.keyword,
        from: 'mgr'
    })
    if (code === 200) {
        const { list = [], total } = data
        tableData.list = list
        tableData.total = total
    } else {
        tableData.list = []
        tableData.total = 0
    }
}

/**
 * 重置操作
 */
function onRefresh () {
    searchform.keyword = ''
    searchform.public = ''
    tableData.page = 1
    getList()
}

/**
 * 分页的每页数量改变
 * @param data
 */
function handleSizeChange (data) {
    tableData.size = data
    tableData.page = 1
    getList()
}

/**
 * 分页的页码改变
 * @param data
 */
function handlePageChange (data) {
    tableData.page = data
    getList()
}

/**
 * 打开编辑弹窗
 */
const dialogEditRef = useTemplateRef('dialogRef')

function openDialog (type, item) {
    dialogEditRef.value.openDialog(type, item)
}

/**
 * 删除用户操作
 */
function deleteItem (item) {
    /*删除二次确认*/
    ElMessageBox.confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const { code, data = [] } = await ballactiveApi.delete.post({ id: item.id })
        if (code === 200) {
            tableData.page = 1
            getList()
            ElMessage.success('删除成功')
        } else {
            ElMessage.error(data.msg)
        }
    }).catch(() => {
        ElMessage.info('取消删除')
    })
}

onMounted(() => {
    getList()
})

</script>


<style>

.table-section {
}
</style>

